<template>
    <div class = 'login'>
        <div class = 'box'>
            <div @click = '$router.go(-1)' class = 'back'>返回</div>
            <div class = 'title'>注册页</div>
            <div>
                <input type='text' placeholder='请输入用户名' v-model = 'user'>
            </div>
            <div>
                <input type='text' placeholder='请输入账号' v-model = 'account'>
            </div>
            <div>
                <input type='text' placeholder='请输入密码' v-model = 'password'>
            </div>
            <div>
                    <div class = 'button' @click = 'register'>
                        <span>立即注册</span>
                    </div>
            </div>
        </div>
        <div v-if = 'isRtrue' class = 'success'>
            <div>
                <div><span>注册成功</span></div>
                 <router-link :to = '{path:"/login",query:{name:$route.query.name,id:$route.query.id}}'>
                    <div class = 'tologin'><span>确定</span></div>
                </router-link>
            </div>
        </div>
        <div v-if = 'isNameSame' class = 'Same'>用户名已存在</div>
        <div v-if = 'isAccountSame' class = 'Same'>账号已存在</div>
    </div>
</template>
<script>
export default{
    data(){
        return {
            user : '',
            password : '',
            account : '',
            accountArr : [],
            passwordArr : [],
            userArr : [],
            isRtrue : false,
            isNameSame : false,
            isAccountSame : false,
        }   
    },
    methods:{
        register(){
            this.isNameSame = false;
            this.isAccountSame = false;
            if(this.user == '' || this.account == '' || this.password == ''){
                alert('输入框不能为空');
                return 
            };
            let accountStr =  localStorage.getItem('account');
            let passStr =  localStorage.getItem('pass');
            let userStr =  localStorage.getItem('user');
            this.accountArr = accountStr.split(',');
            this.passwordArr = passStr.split(',');
            this.userArr = userStr.split(',');
            if(this.accountArr.indexOf(this.account) != -1){
                this.isAccountSame = true;
                return;
            }
            if(this.userArr.indexOf(this.user) != -1){
                this.isNameSame = true;
                return;
            }
                accountStr += ','+this.account;
                passStr += ','+this.password;
                userStr += ','+this.user;
                this.accountArr = accountStr.split(',');
                this.passwordArr = passStr.split(',');
                this.userArr = userStr.split(',');
                localStorage.setItem('user',userStr);
                localStorage.setItem('account',accountStr);
                localStorage.setItem('pass', passStr);
                this.isRtrue = true;
                this.account = '';
                this.password = '';
                this.user = '';
        },
    },
    created(){
        if(localStorage.getItem('account') == undefined){
            localStorage.setItem('user',`陈俊洲`);
            localStorage.setItem('account',`123444`);
            localStorage.setItem('pass',`123456`);
        }
    }
}
</script>
<style lang = 'scss' scoped>
body{
    background-color : white;
    .login{
        background-color : white;
        height : 100%;
        position : absolute;
        top : 0;
        left : 0;
        right : 0;
        bottom : 0;
        margin : auto;
        .box{
            height : 300px;
            width : 60%;
            margin : 0px auto;
            padding-top : 150px;
            .title{
                position : absolute;
                top : 0;
                left : 0;
                text-align : center;
                width : 100%;
                font-size : 22px;
            }
            .back{
                position : fixed;
                top : 0px;
                left : 10px;
                font-size : 18px;
                color : grey;
                z-index : 99;
            }
            >div{
                text-align : center;
                font-size : 16px;
                margin-top : 10px;
                input{
                    width : 100%;
                    height : 40px;
                    padding-left : 10px;
                    margin-bottom : 20px;
                    border : 0;
                    border-bottom : 1px solid #ccc;
                }
                .button{
                    margin-top : 10px;
                    font-size : 16px;
                    height : 30px;
                    line-height : 30px;
                    display : inline-block;
                    width : 50%;
                    text-align : center;
                    border : 1px solid #ccc;
                    box-sizing : border-box;
                }
            }
        }
        .Same{
            color : red;
            text-align : center;
        }
        .success{
            position : absolute;
            width : 100%;
            height : 100%;
            top : 0;
            z-index : 99;
            background : rgba(0,0,0,0.2);
            >div{
                margin : 150px auto;
                border-radius : 20px;
                width : 300px;
                height : 150px;
                color : #ff9900;
                text-align : center;
                background-color : white;
                padding-top : 30px;
                .tologin{
                    font-size : 18px;
                    width : 50px;
                    height : 30px;
                    line-height : 30px;
                    border : 1px solid #ccc;
                    margin : 50px auto;
                    color : white;
                    background-color : tomato;
                    border-radius : 10px;
                }
            }
        }
    }
}

</style>